import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    ListView,
    TouchableOpacity,
    RefreshControl,                         //刷新小组件
    ActivityIndicator                       //底部刷新小组件
} from 'react-native';

import { Select_tradeStyle as styles } from '../../../../../styles';

import fmt from '../../../../util/fmtDateUtil';
import sal from '../../../../util/sal';

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => { r1 !== r2 } });//listView 数据判断方式
export default class Selectfour extends Component {
    // 初始化模拟数据
    constructor(props) {
        super(props);
        this.state = {
            uploading: true, //下拉刷新按钮状态 (初始化加载时处在loading状态)
            dwloading: false, //上拉刷新按钮状态
        }
        this.isFirst = true                         //页面第一次加载
    }

    render() {
        //获取用户列表数据及是否等待状态
        const { postionList } = this.props.postions;
        //创建listView数据源
        const dataSource = ds.cloneWithRows(postionList);
        return (
            <View style={styles.selcenterall}>
                <ListView
                    refreshControl={                            //是否更新
                        <RefreshControl                         //刷新控件
                            refreshing={this.state.uploading && this.props.isloading}                  //刷新时候的小控件
                            onRefresh={this._onRefresh.bind(this)}
                        />}
                    enableEmptySections={true}
                    dataSource={dataSource}         //数据源(数组)
                    renderRow={this.renderRow.bind(this)}                 // 遍历数组的回调函数
                    onEndReachedThreshold={1}                  //滚动临界值（到达后执行onEndReached）
                    onEndReached={this.onEndReached.bind(this)}          //屏幕到底部的触发的事件
                    renderFooter={this.renderFooter.bind(this)}           //底部刷新组件
                />
            </View>
        );
    }

    //刷新隐藏按钮
    componentDidUpdate() {
        if (this.state.uploading && !this.props.isloading) {
            this.setState({
                uploading: false //下拉刷新按钮状态：隐藏
            })
        }
        if (this.state.dwloading && !this.props.isloading) {
            this.setState({
                dwloading: false //上拉刷新按钮状态：隐藏
            })
        }
    }

    //下拉刷新开始
    _onRefresh() {
        this.props.isloading = true //设置为加载状态
        const { actions } = this.props;
        const aa={
            page: 1,
            likeStr: this.props.likeStr, 
            workspace: this.props.workspace
        }
        actions.SelposMobAction(aa);
        this.setState({
            uploading: true //下拉刷新按钮状态：显示
        });
    }

    onEndReached() {
        if (!this.isFirst && !this.props.isloading) {
            const { postionList, page, pages } = this.props.postions;
            if (page != pages) {//不等于最后一页加载
                const { actions } = this.props;
                const aa={
                    page: page + 1,
                    likeStr: this.props.likeStr, 
                    workspace: this.props.workspace,
                }
                actions.SelposMobAction(aa);
                this.props.isloading = true;
                this.setState({
                    dwloading: true //下拉刷新按钮状态 显示
                })
            }
        } else {
            this.isFirst = false;
        }
    }

    renderFooter() {
        if (!this.props.ret) {
            //console.log("请求失败");
        }
        if (this.state.dwloading) {
            return (<View style={{ marginVertical: 10 }}>
                <ActivityIndicator
                    animating={true}
                    style={{ height: 10, alignItems: 'center', justifyContent: 'center', padding: 1, }}
                    size="small" />
            </View>);
        }
        if (this.state.uploading) {
            return (<View style={{ marginVertical: 10, height: 100, alignItems: 'center', justifyContent: 'flex-end' }}>
                <Text>玩命加载ing</Text>
            </View>);
        }
        return (<View style={{ marginVertical: 10 }} />);
    }

    renderRow(rowData) {
        return (
            <TouchableOpacity
                style={styles.tra_pall}
                onPress={() => { this.goGet('Postionin', rowData.postionId) }}     //点击时候进入详情页面
                activeOpacity={1}>
                <View style={styles.tra_pev}>
                    <Text style={styles.tra_pname}>{rowData.postionName}</Text>
                    <Text style={styles.tra_pmoney}>{sal(rowData.postionMm, rowData.postionYm)}</Text>
                </View>
                <View style={styles.tra_pev2}>
                    <Text style={styles.tra_one}>{rowData.postionSpace}</Text>
                    <Text style={styles.tra_one}>{rowData.postionExp}年经验</Text>
                    <Text style={styles.tra_one}>{rowData.postionEducation}</Text>
                    <Text style={styles.tra_ptime}>{fmt(rowData.postionTime, "yyyy-MM-dd")}</Text>
                </View>
                <View style={styles.tra_pev3}>
                    <Image source={require('../../../../img/app/logo.png')} style={styles.head} />
                    <View style={styles.tra_pth}>
                        <Text style={styles.tra_cname}>{rowData.company.companyName}</Text>
                        <View style={styles.tra_he}>
                            {this.fieldName(rowData.company.domains, 3)}
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
    //经营领域
    fieldName(List, sl) {
        var data = {
            cont: List
        }
        var arr = [];                            //用来装公司类型
        var s = sl;
        var length = data.cont.length
        if (length <= s) {
            s = length
        }
        for (var i = 0; i < s; i++) {
            arr.push(
                <Text key={i} style={styles.tra_ptwo}>{data.cont[i].field.fieldName}</Text>
            )
        }
        return arr;
    }

    goGet(name, id) {
        this.props.navigation.navigate(name, { useId: id });
    }
} 